<template>
  <div class="share">
    <el-main>
      <div style="z-index: 9999;position: fixed;right: 20px;box-shadow: 5px 5px 13px 1px rgba(0, 0, 0, 0.3);">
        <el-button type="primary" @click="loadPdf">导出</el-button>
      </div>
      <div v-if="type == 'visit_json'">
        <div v-if="name1.indexOf(dataName) >= 0 && data[dataName]">
          <div class="title1">
            {{ username }}-{{ data[dataName][0].name }}<span>{{ data[dataName].length }}</span>家：
          </div>
          <el-table @row-click="tableclick" border
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', }" :data="data[dataName]"
            style="width: 100%; ">
            <el-table-column type="index" width="40" label="" align="center">
            </el-table-column>
            <el-table-column prop="name" width="150" label="类别" align="center">
            </el-table-column>
            <el-table-column prop="company" label="企业名称">
            </el-table-column>
            <el-table-column v-if="name1_.indexOf(dataName) >= 0" prop="year" label="获奖年份" width="100" align="center">
            </el-table-column>
          </el-table>
        </div>

        <div v-if="dataName == 'demand_list'">
          <div class="title1">
            {{ username }}-走访需求收集情况表<span>{{ data[dataName].length }}</span>家：
          </div>
          <el-table @row-click="tableclick"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold' }" :data="data[dataName]"
            style="width: 100%" border>
            <el-table-column type="index" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="company_name" label="企业">
            </el-table-column>
            <el-table-column prop="so_time" label="日期">
              <template slot-scope="scope">
                <div class="merge">
                  <div v-if="scope.row.so_time">
                    {{ scope.row.so_time ? scope.row.so_time.slice(0, 10) : '' }}
                  </div>
                  <div v-else>
                    {{ scope.row.solve_time ? scope.row.solve_time.slice(0, 10) : '' }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="需求状态">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    <div class=" blue" v-if="scope.row.status">
                      {{ scope.row.status ? '已解决' : '未解决' }}
                    </div>
                    <div v-else class="red">
                      {{ scope.row.status ? '已解决' : '未解决' }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="需求记录" prop="des">
            </el-table-column>
            <el-table-column prop="solve_des" label="解决方案">
            </el-table-column>
          </el-table>
        </div>

      </div>
      <div v-else>
        <div v-if="type == 'one_json'">
          <div class="title1">
            新授权专利情况-{{ one_jsonDataName[dataName] }}<span>{{ data[dataName].length }}</span>家：
          </div>
          <el-table border @row-click="tableclickName"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
            :data="data[dataName]" style="width: 100%">
            <el-table-column prop="rank" label="序号" width="80" align="center">
            </el-table-column>
            <el-table-column prop="company" label="走访情况" width="100" align="center">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                      {{ scope.row.tip }}
                    </div>
                    <div v-else class="red">
                      {{ scope.row.tip }}
                    </div>
                  </div>
                </div>
              </template>

            </el-table-column>
            <el-table-column prop="company" label="申请人">
            </el-table-column>
            <el-table-column prop="apc_num" label="专利数量" align="center">
            </el-table-column>
            <el-table-column prop="num" label="走访次数" align="center">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    {{ scope.row.num }}次
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else-if="type == 'two_json'">
          <div class="title1">
            PCT专利<span>{{ data[dataName].length }}</span>家：
          </div>
          <el-table border @row-click="tableclickName"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
            :data="data[dataName]" style="width: 100%">
            <el-table-column prop="rank" label="序号" width="50" align="center">
            </el-table-column>
            <el-table-column prop="company" label="走访情况" width="100" align="center">
              <template slot-scope="scope">
                <div class="merge">
                  <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                    {{ scope.row.tip }}
                  </div>
                  <div v-else class="red">
                    {{ scope.row.tip }}
                  </div>
                </div>
              </template>
            </el-table-column>


            <el-table-column prop="company" label="申请人">
            </el-table-column>
            <el-table-column prop="apc_num" label="PCT数量" align="center">
            </el-table-column>

            <el-table-column prop="tip" label="走访次数" align="center">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    {{ scope.row.num }}次
                  </div>
                </div>

              </template>
            </el-table-column>
          </el-table>
        </div>

        <div v-else-if="type == 'three_json'">
          <div class="title1">
            质押融资<span>{{ data[dataName].length }}</span>家：
          </div>
          <el-table border @row-click="tableclickName"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
            :data="data[dataName]" style="width: 100%">
            <el-table-column prop="rank" label="序号" width="50" align="center">
            </el-table-column>
            <el-table-column prop="company" label="走访情况" width="100" align="center">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                      {{ scope.row.tip }}
                    </div>
                    <div v-else class="red">
                      {{ scope.row.tip }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="company" label="申请人">
            </el-table-column>
            <el-table-column prop="apc_num" :label="dataName == 'table_preserve_three' ? '专利质押数量' : '保全专利量'"
              align="center">
            </el-table-column>
            <el-table-column prop="tip" label="走访次数" align="center" width="160">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    {{ scope.row.num }}次
                  </div>
                </div>

              </template>
            </el-table-column>
          </el-table>
        </div>


        <div v-else-if="type == 'four_json'">
          <div class="title1">
            总数为：<span>{{ data[dataName].length }}</span>
          </div>
          <div v-if="name2.indexOf(dataName) >= 0">

            <el-table border @row-click="rowClick"
              :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
              :data="data[dataName]" style="width: 100%">
              <el-table-column type="index" width="40" label="" align="center">
              </el-table-column>
              <el-table-column prop="tio" label="专利标题" align="center">
                <template slot-scope="scope">
                  <div class="merge">
                    <div>
                      {{ scope.row.tio }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="apo" label="申请人">
              </el-table-column>
              <el-table-column prop="pno" label="公开号" align="center">
              </el-table-column>
              <el-table-column prop="pno" label="公开日" align="center">
                <template slot-scope="scope">
                  <div class="merge">
                    <div>
                      {{ scope.row.pd ? scope.row.pd.slice(0, 10) : '' }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="pno" label="转让日" align="center">
                <template slot-scope="scope">
                  <div class="merge">
                    <div>
                      {{ scope.row.edd ? scope.row.edd.slice(0, 10) : '' }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="aasc" label="变更后权利人">
                <template slot-scope="scope">
                  <div v-for="item in scope.row.aasc.split(';')">
                    {{ item }};
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <el-table v-if="name3.indexOf(dataName) >= 0" border @row-click="tableclickName"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
            :data="data[dataName]" style="width: 100%">
            <el-table-column type="index" width="40" label="" align="center">
            </el-table-column>
            <el-table-column width="100" label="走访情况" align="center">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                      {{ scope.row.tip }}
                    </div>
                    <div v-else class="red">
                      {{ scope.row.tip }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="100" label="走访次数" align="center">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    {{ scope.row.num }}次
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="company" label="变更后权利人">
            </el-table-column>
            <el-table-column prop="apc_num" label="涉及专利量">
            </el-table-column>
            <el-table-column prop="list_info" label="具体详情">
              <template slot-scope="scope">
                <span v-for="(item, index)  in scope.row.list_info">
                  {{ index }}({{ item }})；
                </span>
              </template>
            </el-table-column>
          </el-table>

          <el-table v-if="name5.indexOf(dataName) >= 0" border @row-click="tableclickName"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
            :data="data[dataName]" style="width: 100%">
            <el-table-column type="index" width="40" label="" align="center">
            </el-table-column>
            <el-table-column prop="company" :label="dataName == 'school_two_inc_arr' ? '发明人' : '申请人'">
            </el-table-column>
            <el-table-column prop="list_info" label="变更后权利人及其受让数量">
              <template slot-scope="scope">
                <span v-for="(item, index)  in scope.row.list_info">
                  {{ index }}({{ item }})；
                </span>
              </template>
            </el-table-column>
          </el-table>

          <el-table v-if="name4.indexOf(dataName) >= 0" border @row-click="tableclickName"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
            :data="data[dataName]" style="width: 100%">
            <el-table-column type="index" width="40" label="" align="center">
            </el-table-column>
            <el-table-column width="100" label="走访情况" align="center">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                      {{ scope.row.tip }}
                    </div>
                    <div v-else class="red">
                      {{ scope.row.tip }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="company" label="变更后权利人">
            </el-table-column>
            <el-table-column prop="apc_num" label="涉及专利量">
            </el-table-column>
            <el-table-column prop="list_info" label="具体详情">
              <template slot-scope="scope">
                <span v-for="(item, index)  in scope.row.list_info">
                  {{ index }}({{ item }})；
                </span>
              </template>
            </el-table-column>
          </el-table>

          <el-table border v-else-if="dataName == 'table_aspc_arr'"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', }" :data="data[dataName]"
            style="width: 100%">
            <el-table-column type="index" width="40" label="" align="center">
            </el-table-column>
            <el-table-column width="100" label="走访情况" align="center">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    <div class="blue" v-if="scope.row.tip == '已走访'" style="color: #4e81f6">
                      {{ scope.row.tip }}
                    </div>
                    <div v-else class="red">
                      {{ scope.row.tip }}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="company" label="受让主体">
            </el-table-column>
            <el-table-column prop="apc_num" label="受让专利量" width="100" align="center">
            </el-table-column>
            <el-table-column prop="num" label="走访次数" align="center" width="100">
              <template slot-scope="scope">
                <div class="merge">
                  <div>
                    {{ scope.row.num }}次
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-table border v-else-if="dataName == 'company_two_apc_arr'"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', }" :data="data[dataName]"
            style="width: 100%">
            <el-table-column type="index" width="40" label="" align="center">
            </el-table-column>
            <el-table-column prop="name" label="申请主体">
            </el-table-column>
            <el-table-column prop="value" label="转让专利量">
            </el-table-column>
          </el-table>

          <el-table border v-else-if="dataName == 'company_two_inc_arr'"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', }" :data="data[dataName]"
            style="width: 100%">
            <el-table-column type="index" width="40" label="" align="center">
            </el-table-column>
            <el-table-column prop="name" label="发明人">
            </el-table-column>
            <el-table-column prop="value" label="转让专利量">
            </el-table-column>
          </el-table>
        </div>

        <div v-else-if="type == 'five_json'">
          <div class="title1">
            诉讼<span>{{ data[dataName].length }}</span>家：
          </div>
          <el-table border @row-click="see"
            :header-cell-style="{ background: '#4e81f6', color: '#fff', fontWeight: 'bold', textAlign: 'center' }"
            :data="data[dataName]" style="width: 100%">
            <el-table-column label="序号" type="index" width="50" align="center" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="ctio" label="标题原文" align="center">
            </el-table-column>
            <el-table-column prop="plo" label="上诉人" align="center">
            </el-table-column>
            <el-table-column prop="ct" label="案件类型" align="center">
            </el-table-column>
            <el-table-column prop="cjd" label="判决日" align="center">
            </el-table-column>
            <el-table-column prop="cdn" label="案号" align="center">
            </el-table-column>
          </el-table>
        </div>

      </div>
    </el-main>
  </div>
</template>

<script>
import {
  reportDetail,
  getCompanyId,
  reportExcel
} from "@/api/newuser";
import CountTo from 'vue-count-to'
import { VUE_APP_BASE_API } from "@/config";

export default {
  data() {
    return {
      username: '',
      one_jsonDataName: {
        table1: '发明专利',
        table2: '实用新型专利',
        table3: '外观设计专利',
      },
      report_id: '',
      type: '',
      needToMergeColumns: ['name'],
      dataName: '',
      data: {},
      name1: ['honor_one_arr', 'honor_two_arr', 'honor_three_arr', 'honor_four_arr', 'honor_five_arr', 'honor_six_arr'],
      name1_: ['honor_one_arr', 'honor_two_arr', 'honor_three_arr'],
      name2: ['two_company_arr', 'two_person_arr', 'two_school_arr'],
      name3: ['company_two_arr', 'person_two_arr'],
      name4: ['school_two_aspc_arr',],
      name5: ['school_two_apc_arr', 'school_two_inc_arr'],
    };
  },
  watch: {},
  filters: {
    tt(data) {
      if (!data) {
        return "";
      }
      let str = "";
      let obj = {
        1: "申请权转移",
        2: "专利权转移",
      };
      let arr = data.split(";");
      arr.map((res) => {
        if (!str) {
          str += obj[res];
        } else {
          str = str + ";" + obj[res];
        }
      });

      return str;
    },
  },
  props: {},
  components: {
    CountTo
  },
  async mounted() {
    this.username = this.$store.state.user.name;
    this.report_id = this.$route.query.report_id,
      this.type = this.$route.query.type,
      this.dataName = this.$route.query.dataName
    this.reportDetail()
  },
  methods: {
    loadPdf() {
      window.open(
        `${VUE_APP_BASE_API}/v1/export/reportExcel?report_id=${this.report_id}&json_type=${this.type}&type=${this.dataName}`
      );
    },
    see(row, column, event) {
      //新窗口打开
      const { href } = this.$router.resolve({
        path: "/analysisLitigation",
      });
      window.open(href + `?id=${row.cid}`, "_blank");
    },
    rowClick(row, column, event) {
      //新窗口打开
      const { href } = this.$router.resolve({
        path: "/detail",
      });
      window.open(href + `?pid=${row.pid}&preview=1`, "_blank");
    },
    tableclick(row, column, event) {
      let routerJump = this.$router.resolve({
        path: "/workEnterprisevisit",
        query: {
          id: row.id,
          company_id: row.company_id,
        },
      });
      window.open(routerJump.href, "_blank");


      // this.$router.push({
      //   path: "/workEnterprisevisit",
      //   query: {
      //     id: row.id,
      //     company_id: row.company_id,
      //   },
      // });
    },
    tableclickName(row) {
      getCompanyId({
        company: row.company,
      }).then((res) => {
        let routerJump = this.$router.resolve({
          path: "/workEnterprisevisit",
          query: {
            company_id: res.id,
          },
        });
        window.open(routerJump.href, "_blank");

        // this.$router.push({
        //   path: "/workEnterprisevisit",
        //   query: {
        //     company_id: res.id,
        //   },
        // });
      });
    },
    reportDetail() {
      reportDetail({
        report_id: this.report_id,
        type: this.type,
      }).then(res => {
        this.data = res.json
      })
    }
  },
};
</script>

<style scoped lang="less">
.title1 {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20px;

  span {
    color: #4e81f6;
  }
}

.merge {
  &>div {
    margin-top: 5px;
  }

  &>div:nth-child(1) {
    margin-top: 0px;
  }

  .red {
    color: #ff5f58;
    border: 1px solid;
    display: inline-block;
    padding: 0 5px;
    border-radius: 5px;
  }

  .blue {
    color: #4e81f6;
    border: 1px solid;
    display: inline-block;
    padding: 0 5px;
    border-radius: 5px;
  }
}

::v-deep .el-select {

  input {
    // background: #409eff;
  }
}

.more {
  color: #4e81f6;
  text-align: right;
  margin-top: 5px;
}

.demand_box {
  margin-bottom: 10px;
  height: 100px;

  .left_demand {
    background-color: #f5f6fa;
    height: 100%;
    text-align: left;
    font-size: 16px;
    padding: 38px 0px 29px 46px;
    line-height: initial;
    position: relative;
    color: var(--bgc);
    position: relative;

    .left_demand_new {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .demand_title {
      display: inline-block;
      position: relative;

    }

    .demand_title::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 12px;
      border-radius: 3px;
      background-color: var(--bgc);
      margin-right: 5px;
      vertical-align: middle;
      position: absolute;
      top: 50%;
      left: -10px;
      transform: translate(0px, -50%);
    }
  }
}

.pie_new {
  height: 100%;

  .pie {
    height: 100%;
  }
}

.table {
  // padding: 20px 0px;
  margin-top: 20px;
}

.echartsBox {
  width: 100%;
  height: 185px;
  margin-top: 20px;
}

.topBox {
  // border-bottom: 3px solid #f4f5f7;
  margin-bottom: 20px;

  .itemData {
    margin-top: 60px;
  }

  .text {
    color: #676767;
    line-height: 28px;

    &>span {
      display: inline-block;
      margin-bottom: 20px;
    }

    &>span:last-child {
      margin-bottom: 0;
    }
  }

  .number {
    color: #0455f5;
  }
}

.time {
  margin: 20px 0;
  font-size: 14px;
}

.company_title {
  font-weight: bolder;
  font-size: 24px;
  margin-bottom: 5px;
  position: relative;
  margin-top: 50px;
}

.share {
  line-height: initial;

  .box {
    display: flex;
    justify-content: center;

    .itemBox {
      width: 700px;

      .question {
        border: 2px solid #f5f6fa;
        padding: 0px 30px 25px 30px;
        border-radius: 10px;
        margin: 10px 0;

        .title {
          margin-bottom: 20px;
          font-size: 22px;
          margin-top: 20px;
          font-weight: bold;

          span {
            font-weight: initial;
            // margin-left: 10px;
          }
        }

        .titleSmall {
          text-align: center;
        }

        .titleSmallSize {
          font-size: 18px;
        }

        .visitBox {
          display: flex;
          justify-content: space-between;
          gap: 10px;

          .visitItem {
            text-align: center;
            background-color: #f5f6fa;
            height: 130px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px 0;

            .number {
              font-size: 26px;
              font-weight: bold;
            }

            &:nth-child(1) .number {
              color: #1269fe;
            }

            &:nth-child(2) .number {
              color: #7f6aed;
            }

            &:nth-child(3) .number {
              color: #fe886c;
            }

            &:nth-child(4) .number {
              color: #31cfb6;
            }
          }
        }
      }
    }
  }
}

.titleBig {
  font-size: 28px;
  margin-top: 30px;
  font-weight: bold;
  padding-bottom: 20px;
  border-bottom: 3px solid #eeeeee;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}

@media (max-width: 768px) {
  .share .box .itemBox {
    width: 100%;
  }
}
</style>
